import React, { Component } from 'react'

import {get} from "../../../utils/http"
import {Grid} from "antd-mobile"
import {HotCateWarp} from "../styledControl/Styled"

export default class Hotcate extends Component {
    state = {
        hotCateList: []
    }

    async componentDidMount() {
        let result = await get({url: "/api/hotcate"})
        // console.log( 'result', result);
        let data = result.map(value => (
            {
                id: value.id,
                icon: value.img,
                title: value.title
            }
        ))
        this.setState(() => ({hotCateList: data}))
    }

    _renderItem = dataItem => (
        <div className="item">
            {
                dataItem.icon && <img src={dataItem.icon} alt="热门"/>
            }
            <span>{dataItem.title}</span>
        </div>
    )

    render() {
        const { hotCateList } = this.state
        return (
            <div>
                <HotCateWarp>
                    <header>热门分类</header>
                    <Grid data={hotCateList}
                    columnNum={3}
                    hasLine={false}
                    renderItem={this._renderItem}
                    />
                </HotCateWarp>
            </div>
        )
    }
}
